<template>
	<view class="wrap">
		<image class="bg" src="https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/17231086228711299.png"
			mode="widthFix"></image>
		<view class="navBox">
			<topStatus></topStatus>
			<view class="nav_main">
				<uni-icons type="left" color="#333" size="30" @click="goBack()"></uni-icons>
				<view class="nav_tit">
					商户管理
				</view>
				<uni-icons type="left" color="#333" size="30" style="opacity: 0;"></uni-icons>
			</view>
		</view>

		<view class="store_body">
			<view class="store_titbox">
				<view class="titbox_icon">
					<image src="https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/172310907874595.png"
						mode="aspectFill"></image>
				</view>
				<view class="titbox_tit">
					{{ shop.Shop.ShopName || '--' }}
				</view>
			</view>
			<view class="store_total">
				<view class="total_cell">
					<view class="tit_cell">
						<view class="tit">
							订单总金额(元)
						</view>
						<!-- <view class="icon">
							<image src="https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/1723109253581988.png" mode="aspectFill"></image>
						</view> -->
					</view>
					<view class="countbox">
						<view class="count">
							{{ shop ? Number(shop.OrderFee).toFixed(2) : 0 }}
						</view>
					</view>
				</view>
				<view class="total_cell" @click="nav_to(`/pages/store/endPrice?total=${shop.Blance}`)">
					<view class="tit_cell">
						<view class="tit">
							可结算金额(元)
						</view>
						<view class="icon" @click.stop="$refs.NoPopup.open()">
							<image src="https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/1723109253581988.png"
								mode="aspectFill"></image>
						</view>
					</view>
					<view class="countbox">
						<view class="count">
							{{ shop ? Number(shop.Blance).toFixed(2) : 0 }}
						</view>
						<uni-icons type="right" color="#333" size="16"></uni-icons>
					</view>
				</view>
			</view>
		</view>

		<view class="order_body">
			<view class="order_tit">
				订单管理
			</view>

			<view class="order_main">
				<view class="order_cell" v-for="(item, index) in orderList" :key="index"
					@click="nav_to(`/pages/store/storeOrder?index=${item.status}`)">
					<view class="titbox">
						<view class="tit">
							{{ item.tit }}
						</view>
					</view>
					<view class="content">
						<view class="count">
							{{ item.count }}
						</view>
						<view class="icon">
							<image :src="item.icon" mode="aspectFill"></image>
						</view>
					</view>
				</view>
				<view class="order_cell" @click="nav_to(`/pages/store/statistics`)">
					<view class="titbox">
						<view class="tit">
							当月订单
						</view>
					</view>
					<view class="content">
						<view class="count">
							{{ MonthOrderNum }}
						</view>
						<view class="icon">
							<image src="https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/17231103610401386.png"
								mode="aspectFill"></image>
						</view>
					</view>
				</view>
			</view>

		</view>
		<view class="order_body">
			<view class="order_titbox">
				<view class="order_tit">
					商品管理
				</view>
				<view class="goods_add" @click="nav_to('/pages/store/goods_add')">+ 发布商品</view>
			</view>
			<view class="order_main">
				<view class="order_cell" v-for="(item, index) in merchant" :key="index"
					@click="nav_to(`/pages/store/shop_man?index=${item.status}`)">
					<view class="titbox">
						<view class="tit">
							{{ item.tit }}
						</view>
					</view>
					<view class="content">
						<view class="count">
							{{ item.count }}
						</view>
						<view class="icon">
							<image :src="item.icon" mode="aspectFill"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<uni-popup ref="NoPopup" type="center">
			<view class="NoPopup">
				<view class="titBox">
					<view class="tit">
						可结算金额
					</view>
				</view>
				<view class="inpbox">
					<view class="tit">
						可结算金额=已发货签收订单总金额-已结算
					</view>
				</view>
				<view class="No_btn" @click="$refs.NoPopup.close()">
					我知道了
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
export default {
	data() {
		return {
			orderList: [
				{
					tit: '全部订单',
					count: 0,
					icon: 'https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/17231103610401386.png',
					url: '/pages/store/storeOrder',
					status: 99
				},
				{
					tit: '待发货',
					count: 0,
					icon: 'https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/1723110955150952.png',
					url: '/pages/store/storeOrder',
					status: 1
				},
				{
					tit: '派送中',
					count: 0,
					icon: 'https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/17231109719651172.png',
					url: '/pages/store/storeOrder',
					status: 3
				},
				{
					tit: '已完成',
					count: 0,
					icon: 'https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/1723110985553648.png',
					url: '/pages/store/storeOrder',
					status: 4
				},
				{
					tit: '退货',
					count: 0,
					icon: 'https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/17231109980641184.png',
					url: '/pages/store/storeOrder',
					status: -2
				}
			],
			merchant: [
				{
					tit: '在售',
					count: 0,
					icon: 'https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/17321832120851441.png',
					url: '/pages/store/shop_man',
					status: 1
				},
				{
					tit: '下架',
					count: 0,
					icon: ' https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/1732183226210642.png',
					url: '/pages/store/shop_man',
					status: 2
				},
				{
					tit: '草稿',
					count: 0,
					icon: 'https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/1732183248986650.png',
					url: '/pages/store/shop_man',
					status: 3
				},
			],
			shop: [],
			goods_obj: {},
			shopId: 0,
			MonthOrderNum: 0,
		};
	},
	onLoad(e) {
		this.shopId = e?.id || 0
	},
	onShow() {
		this.init()
	},
	methods: {
		async MyShopProductData() {
			let res = await this.$api.post('Shops/MyShopProductData', {
				ID: this.shop.Shop.ID
			})
			if (res.code == 0) {
				this.goods_obj = res.data
				this.merchant.forEach(item => {
					if (item.status == 1) {
						item.count = res.data.SalesNum
					} else if (item.status == 2) {
						item.count = res.data.HadOverNum
					} else if (item.status == 3) {
						item.count = res.data.PendingSaleNum
					}
				})
			}
		},
		getOrderNum(val) {
			this.orderList.forEach(item => {
				if (item.status == 99) {
					item.count = val.OrderNum
				} else if (item.status == 1) {
					item.count = val.PendingDeliveryNum
				} else if (item.status == 3) {
					item.count = val.DeliveredNum
				} else if (item.status == 4) {
					item.count = val.FinishedNum
				} else if (item.status == -2) {
					item.count = val.ReturnNum
				}
			})
		},
		goBack() {
			const pages = getCurrentPages();
			if (pages.length > 1) {
				// 如果页面栈长度大于1，则说明有上一页，可以返回
				uni.navigateBack();
			} else {
				// 如果没有上一页，则导航到首页
				uni.reLaunch({
					url: '/pages/tab/home'
				});
			}
		},
		async init() {
			this.MyShopSaleData()
			// this.MyShopProductData()
		},
		async MyShopSaleData() {
			let res = await this.$api.post('/Order/MyShopSaleData', { ID: this.shopId })
			this.shop = res.data
			if (res.data) {
				this.getOrderNum(res.data)
				this.MyShopProductData()
				this.MonthOrderNum = res.data.MonthOrderNum
			}
		}
	}
}
</script>

<style lang="scss">
page {
	background-color: #f6f6f6;
}

image {
	width: 100%;
	height: 100%;
}

.wrap {
	.bg {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: -1;
	}

	.navBox {
		.nav_main {
			padding: 0 14rpx;
			height: 44px;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
	}


	.store_body {
		padding: 0 32rpx;

		.store_titbox {
			margin: 46rpx 0;
			display: flex;
			align-items: center;

			.titbox_icon {
				width: 56rpx;
				height: 56rpx;
				margin-right: 16rpx;
			}

			.titbox_tit {
				font-weight: bold;
				font-size: 32rpx;
				color: #333333;
			}
		}

		.store_total {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 32rpx;
			background: #FFFFFF;
			border-radius: 16rpx;

			.total_cell {
				.tit_cell {
					display: flex;
					align-items: center;
					margin-bottom: 10rpx;

					.tit {
						font-size: 28rpx;
						color: #666666;
					}

					.icon {
						width: 32rpx;
						height: 32rpx;
						margin-left: 12rpx;
					}
				}

				.countbox {
					display: flex;
					align-items: center;

					.count {
						font-weight: bold;
						font-size: 48rpx;
						color: #0D0D0D;
						margin-right: 10rpx;
					}
				}

			}
		}
	}

	.order_body {
		margin-top: 40rpx;
		padding: 0 32rpx;

		.order_titbox {
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		.order_tit {
			font-weight: bold;
			font-size: 32rpx;
			color: #333333;
		}

		.goods_add {
			width: 158rpx;
			height: 48rpx;
			border-radius: 24rpx;
			border: 1rpx solid #FF6030;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 24rpx;
			color: #FF6030;
		}

		.order_main {
			display: flex;
			flex-wrap: wrap;

			.order_cell {
				width: 48.255%;
				padding: 24rpx 32rpx;
				background: #FFFFFF;
				border-radius: 16rpx;
				margin: 24rpx 24rpx 0 0;

				.titbox {
					.tit {
						font-size: 28rpx;
						color: #333333;
					}
				}

				.content {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.count {
						font-weight: bold;
						font-size: 48rpx;
						color: #333333;
					}

					.icon {
						width: 72rpx;
						height: 72rpx;
					}
				}
			}

			.order_cell:nth-child(2n) {
				margin-right: 0;
			}
		}
	}

	.NoPopup {
		width: 85vw;
		padding: 40rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		box-sizing: border-box;

		.titBox {
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;

			.tit {
				font-weight: bold;
				font-size: 36rpx;
				color: #333333;
			}

			.icon {
				position: absolute;
				right: -24rpx;
				top: -24rpx;
				width: 60rpx;
				height: 60rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				image {
					width: 80%;
					height: 80%;
				}
			}
		}

		.inpbox {
			display: flex;
			align-items: center;
			margin: 40rpx 0;

			.tit {
				// font-weight: bold;
				font-size: 28rpx;
				color: #666;
				margin-right: 16rpx;
			}

			input {
				flex: 1;
				padding: 18rpx 24rpx;
				text-align: center;
				background: #F5F5F5;
				border-radius: 8rpx;
				margin: 56rpx 0;
			}
		}

		.No_btn {
			background: linear-gradient(98deg, #FFAD26 0%, #FE4E01 100%);
			border-radius: 44rpx;
			padding: 22rpx 0;
			font-weight: bold;
			font-size: 32rpx;
			color: #FFFFFF;
			text-align: center;
		}
	}
}
</style>
